<template>
  <el-dialog :title="title" top="100px" width="650px" append-to-body :visible.sync="dialogedit" @open="openDialog"
    :before-close="closeDialog" :close-on-click-modal="false">
    <div class="form-box">
      <el-form ref="formdata" :model="ruleform" :rules="rules" label-suffix="：" :validate-on-rule-change="false"
        :show-message="false" label-width="100px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="上级部门" prop="parent_id">
              <treeselect v-model="ruleform.parent_id" :options="deptOptions" :normalizer="normalizer"
                placeholder="选择上级部门" />
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item label="部门" prop="dept_name">
              <el-input v-model="ruleform.dept_name" placeholder="请输入部门"></el-input>
            </el-form-item>
          </el-col>

          <!--          <el-col :span="24" v-if="ruleform.sfzd & (ruleform.dept_id==0 || ruleform.dept_id=='')">
            <el-form-item label="机构编号" prop="dm">
              <el-input v-model="ruleform.dm" placeholder="请输入机构编号"></el-input>
            </el-form-item>
          </el-col> -->

          <!--          <el-col :span="12">
            <el-form-item label="是否机构" prop="sfzd">
              <el-radio v-model="ruleform.sfzd" label="0">否</el-radio>
              <el-radio v-model="ruleform.sfzd" label="1">是</el-radio>
            </el-form-item>
          </el-col> -->

          <el-col :span="12">
            <el-form-item label="状态" prop="status">
              <el-radio-group v-model="ruleform.status">
                <el-radio v-for="dict in dict.type.sys_normal_disable" :key="dict.value"
                  :label="dict.value">{{dict.label}}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="save_validate()">保 存</el-button>
      <el-button @click="closeDialog">取 消</el-button>
    </div>
  </el-dialog>
</template>
<script>
  import {
    listDept,
    Get_Info,
    saveDept
  } from '@/api/system/dept';
  import Treeselect from "@riophae/vue-treeselect";
  import "@riophae/vue-treeselect/dist/vue-treeselect.css";
  export default {
    name: 'dept_edit',
    dicts: ['sys_normal_disable'],
    components: {
      Treeselect
    },
    props: {
      dialogedit: {
        type: Boolean,
        default: false
      },
      depid: {
        type: String,
        default: ''
      }
    },
    data() {
      return {
        title: '新增部门',
        deptOptions: [],
        ruleform: {
          dept_id: '',
          parent_id: null,
          parent_o_id: null,
          dept_name: '',
          status: '',

        },
        rules: {
          dept_name: [{
            required: true,
            message: '部门签不能为空'
          }],
          status: [{
            required: true,
            message: '状态不能为空'
          }]
        },

      };
    },
    created() {},
    methods: {
      get_tree() {
        listDept().then(response => {
          this.deptOptions = this.handleTree(response.rows, "dept_id", "parent_id");
        });
      },
      /** 转换部门数据结构 */
      normalizer(node) {
        if (node.children && !node.children.length) {
          delete node.children;
        }
        return {
          id: node.dept_id,
          label: node.dept_name,
          children: node.children
        };
      },
      closeDialog() {
        this.$nextTick(() => {
          this.$refs.formdata.resetFields();
          this.$emit('update:dialogedit', !this.dialogedit);
        });
      },
      save_validate() {
        this.$refs.formdata.validate((valid, valids) => {
          if (valid) {
            this.saveData();
          } else {
            var msg = '';
            for (var key in valids) {
              var item = valids[key];
              msg = item[0].message;
              break;
            }
            if (msg) this.$message.error(msg);

            return false;
          }
        });
      },

      async saveData() {
        const loading = this.loading('保存中...');
        const Params = this.ObjParams(this.ruleform, {});
        saveDept(Params).then(response => {
          this.$modal.msgSuccess("保存成功");
          loading.close();
          this.closeDialog();
          this.$emit('reload');
        }).catch(err => {
          loading.close();
        });
      },
      get_info() {
        const Parmas = {
          deptid: this.depid
        }
        Get_Info(Parmas).then(res => {
          this.ruleform = {
            dept_id: res.data.dept_id,
            parent_id: res.data.parent_id,
            parent_o_id: res.data.parent_id,
            dept_name: res.data.dept_name,
            status: res.data.status
          }

        }).catch(err => {

        });
      },
      async openDialog() {
        this.get_tree();
        if (this.depid !== '') {
          this.get_info();
        } else {
          this.ruleform = {
            dept_id: '',
            parent_id: null,
            parent_o_id: null,
            dept_name: '',
            status: '',
          }
        }
        if (this.depid) {
          this.title = "修改部门";
        } else {
          this.title = "新增部门";
        }
      }
    }
  };
</script>

<style scoped>
  .form-box {
    min-height: 300px;
    padding-right: 10px;
    overflow: auto;
  }
</style>
